<template>
  <view class="page">
    <!-- 顶部表格 -->
    <view class="top-table">
      <view class="cell img-cell">
        <image class="car-img" src="https://img.shuxuntech.com/vin_logo/202510/1760172287350.png" mode="aspectFill"></image>
      </view>
      <view class="cell info-cell">
        <view class="title">品牌、年份、型号</view>
        <view class="sub">原厂指导价</view>
        <view class="vin">LMQ56S1G556D563255</view>
      </view>
    </view>

    <!-- 车辆信息 -->
    <view class="section">
      <view class="section-title">车辆信息</view>
      <view class="kv-table">
        <view class="kv-row">
          <view class="kv-cell kv-label">上牌时间</view>
          <view class="kv-cell">2021-12-3</view>
          <view class="kv-cell kv-label">车牌</view>
          <view class="kv-cell">闽AJ565D2</view>
        </view>
        <view class="kv-row">
          <view class="kv-cell kv-label">公里数</view>
          <view class="kv-cell">58000KM</view>
          <view class="kv-cell kv-label">内外色</view>
          <view class="kv-cell">外黑内白</view>
        </view>
        <view class="kv-row">
          <view class="kv-cell kv-label">过户次数</view>
          <view class="kv-cell">2</view>
          <view class="kv-cell kv-label">行驶证</view>
          <view class="kv-cell icon-eye" @click="previewImage">👁️</view>
        </view>
      </view>
    </view>

    <!-- 预估价格 -->
    <view class="section">
      <view class="section-title">
        预估价格
        <text class="edit" @click="toggleEdit">{{isEdit ? '💾 保存' : '✏️ 编辑'}}</text>
      </view>
      <view class="price-table">
        <view class="t-head">
          <view class="col">车况</view>
          <view class="col">等级</view>
          <view class="col col-2">价格区间（万）</view>
        </view>
        <view class="t-row" v-for="(item,i) in carLevels" :key="i">
          <view class="col">{{item.name}}</view>
          <view class="col">{{item.level}}</view>
          <view class="col col-2">
            <template v-if="isEdit">
              <input class="price-input" v-model="item.low" type="number" placeholder="最低价" />
              <input class="price-input" v-model="item.high" type="number" placeholder="最高价" />
            </template>
            <template v-else>
              {{item.low}} - {{item.high}}
            </template>
          </view>
        </view>
      </view>
    </view>

    <!-- 经办记录 -->
    <view class="section">
      <view class="section-title">经办记录</view>
      <view class="log-table">
        <view class="l-head"><view class="c">节点</view><view class="c">经办人/岗位</view><view class="c">时间</view><view class="c">结果</view></view>
        <view class="l-row"><view class="c">资料申报</view><view class="c">王琳琳 / 业务部</view><view class="c">2025年6月12日 16:39:24</view><view class="c">提交</view></view>
      </view>
    </view>

    <view class="bottom-btn-box">
      <button class="btn gray">驳回</button>
      <button class="btn blue">通过</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isEdit: false,
      carLevels: [
        { name: '优', level: 'S', low: '26.6', high: '28.6' },
        { name: '良', level: 'A', low: '26.6', high: '28.6' },
        { name: '一般', level: 'B', low: '26.6', high: '28.6' },
        { name: '差', level: 'C', low: '26.6', high: '28.6' }
      ]
    }
  },
  methods: {
    previewImage() {
      uni.previewImage({
        urls: ['https://img.shuxuntech.com/vin_logo/202510/1760172287350.png']
      })
    },
    toggleEdit() {
      if (this.isEdit) {
        uni.showToast({ title: '已保存修改', icon: 'success' })
      }
      this.isEdit = !this.isEdit
    }
  }
}
</script>

<style>
.page {background:#f5f7fb;min-height:100vh;padding:30rpx 30rpx 140rpx;}
.top-table {display:grid;grid-template-columns:240rpx 1fr;border:1rpx solid #e6e8ee;border-radius:16rpx;overflow:hidden;background:#fff;box-shadow:0 4rpx 12rpx rgba(0,0,0,0.05);margin-bottom:28rpx;}
.cell {padding:20rpx 24rpx;}
.img-cell {border-right:1rpx solid #eef0f4;display:flex;align-items:center;justify-content:center;background:#f7f9fc;}
.car-img {width:100%;height:160rpx;border-radius:10rpx;object-fit:cover;}
.info-cell .title {font-size:30rpx;color:#222;font-weight:600;margin-bottom:6rpx;}
.info-cell .sub {font-size:26rpx;color:#666;margin-bottom:6rpx;}
.info-cell .vin {font-size:26rpx;color:#8a8f99;letter-spacing:1rpx;}

.section {background:#fff;border-radius:16rpx;padding:20rpx;margin-bottom:28rpx;box-shadow:0 4rpx 12rpx rgba(0,0,0,0.04);}
.section-title {font-size:28rpx;color:#333;text-align:center;font-weight:600;margin-bottom:16rpx;display:flex;align-items:center;justify-content:center;gap:12rpx;}
.edit {margin-left:12rpx;font-size:26rpx;color:#007aff;}
.kv-table {border:1rpx solid #e9ecf2;border-radius:12rpx;overflow:hidden;}
.kv-row {display:grid;grid-template-columns:1fr 1fr 1fr 1fr;border-top:1rpx solid #edf0f5;}
.kv-row:first-child {border-top:none;}
.kv-cell {padding:18rpx 20rpx;font-size:28rpx;color:#333;border-right:1rpx solid #edf0f5;background:#fff;}
.kv-cell:last-child {border-right:none;}
.kv-label {color:#666;background:#f8fafc;}
.icon-eye {text-align:center;color:#007aff;}
.price-table {border:1rpx solid #e9ecf2;border-radius:12rpx;overflow:hidden;}
.t-head,.t-row {display:grid;grid-template-columns:1fr 1fr 2fr;}
.t-head {background:#f8fafc;font-weight:600;color:#333;border-bottom:1rpx solid #edf0f5;}
.t-row {border-top:1rpx solid #edf0f5;background:#fff;}
.col {padding:18rpx 20rpx;font-size:28rpx;color:#333;border-right:1rpx solid #edf0f5;text-align:center;}
.col:last-child {border-right:none;}
.col-2 {grid-column:auto / span 1;}
.price-input {width:48%;border:1rpx solid #ddd;border-radius:10rpx;padding:10rpx;font-size:26rpx;text-align:center;background:#fafafa;}
.log-table {border:1rpx solid #e9ecf2;border-radius:12rpx;overflow:hidden;}
.l-head,.l-row {display:grid;grid-template-columns:1fr 1.2fr 1.6fr .8fr;}
.l-head {background:#f8fafc;font-weight:600;color:#333;border-bottom:1rpx solid #edf0f5;}
.l-row {background:#fff;}
.c {padding:18rpx 20rpx;font-size:28rpx;color:#333;border-right:1rpx solid #edf0f5;text-align:center;}
.c:last-child {border-right:none;}
.bottom-btn-box {position:fixed;left:0;right:0;bottom:0;background:#fff;padding:20rpx 30rpx;display:flex;gap:20rpx;box-shadow:0 -4rpx 12rpx rgba(0,0,0,0.06);}
.btn {flex:1;height:90rpx;line-height:90rpx;font-size:30rpx;border-radius:45rpx;font-weight:600;}
.gray {background:#cfd3da;color:#fff;}
.blue {background:#007aff;color:#fff;}
.btn:active {opacity:.9;}
</style>
